<template>
  <div class="app-container page_scroll">
    <QueryForm v-model="form" @search="search" />
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="个人" name="0">
        <RankTable v-if="activeName == 0" :allTeamList="allTeamList" :allShopList="allShopList" :rankType='activeName' :list="rankList" />
      </el-tab-pane>
      <el-tab-pane label="团队" name="1">
        <RankTable v-if="activeName == 1" :allTeamList="allTeamList" :allShopList="allShopList" :rankType='activeName' :list="rankList" />
      </el-tab-pane>
      <el-tab-pane label="门店" name="2">
        <RankTable v-if="activeName == 2" :allTeamList="allTeamList" :allShopList="allShopList" :rankType='activeName' :list="rankList" />
      </el-tab-pane>
    </el-tabs>
    <!-- <BasePagination v-model="page.page" :total="totalCount" @change="pageOnChange" /> -->
  </div>
</template>
<script>
import {
  getPersonalAchieve,
  getTeamAchieve,
  getShoplCients,
} from "@/api/achieve";
import { getAllShopList } from "@/api/shop/index";
import { getAllTeamList } from "@/api/team/index";
import {
  GET_ACHIEVE_PERSONAL_PAGE,
  GET_ACHIEVE_TEAM_PAGE,
  GET_ACHIEVE_SHOP_PAGE,
} from "@/http/static";
import QueryForm from "./_components/QueryForm.vue";
import RankTable from "./_components/RankTable.vue";
export default {
  name: "Rank",
  components: { QueryForm, RankTable },
  data() {
    return {
      form: {
        teamId: "",
        shopId: "",
        name: "",
        startDate: "",
        endDate: "",
      },
      activeName: "0",
      rankList: [],
      totalCount: 0,
      page: {
        page: 1,
        size: 10000,
      },
      allShopList: [],
      allTeamList: [],
    };
  },
  watch: {
    activeName: {
      handler(type) {
        this.page.page = 1;
        this.rankList = [];
        this.getCients(type);
      },
      immediate: true,
    },
  },
  created() {
    // this.getAllShopList();
    // this.getAllTeamList();
  },
  methods: {
    async getCients(type) {
      this.showAppLoading();
      const params = {
        paramObject: this.form,
        ...this.page,
      };
      const res =
        type === "0"
          ? await GET_ACHIEVE_PERSONAL_PAGE(params)
          : type === "1"
          ? await GET_ACHIEVE_TEAM_PAGE(params)
          : await GET_ACHIEVE_SHOP_PAGE(params);
      this.hideAppLoading();
      //if (!res.result) return;
      this.rankList = res.data||[];
      // this.totalCount = res.data.totalCount;
      // this.page.page = res.data.page;
    },
    search() {
      this.page.page = 1;
      this.rankList = [];
      this.getCients(this.activeName);
    },
    async getAllShopList() {
      const res = await GET_ACHIEVE_SHOP_PAGE();
      if (!res.result) return;
      this.allShopList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    },
    async getAllTeamList() {
      const res = await GET_ACHIEVE_TEAM_PAGE();
      //if (!res.result) return;
      this.allTeamList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    },

    pageOnChange(row) {
      this.page.page = row.page;
      if (row.pageSize) {
        this.page.size = row.pageSize;
      }
      this.getCients(this.activeName);
    },

    // 获取

  },
};
</script>
